<template>
    <div>
        <header class="mdui-appbar mdui-appbar-fixed">
            <div class="mdui-toolbar mdui-color-theme">
                <span class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white" mdui-drawer="{target:'#main-drawer'}">
                    <i class="mdui-icon material-icons">menu</i>
                </span>
                <span class="mdui-typo-title">知乎日报</span>
                <div class="mdui-toolbar-spacer"></div>
            </div>
        </header>
        <div class="mdui-drawer mdui-drawer-left" id="main-drawer">
            <ul class="mdui-list">
                <li class="mdui-list-item mdui-ripple" :class="{'mdui-list-item-active':isActive}" @click="toRecommend">
                    <i class="mdui-list-item-icon mdui-icon material-icons">star</i>
                    <div class="mdui-list-item-content">每日推荐</div>
                </li>
                <div class="mdui-divider"></div>
                <li class="mdui-list-item mdui-ripple" v-for="item in themes" :class="{'mdui-list-item-active':itemId===item.id}" @click="toThemes(item.id)">
                    <div class="mdui-list-item-avatar"><img :src="'http://192.168.13.158:8011/img/'+item.thumbnail" /></div>
                    <div class="mdui-list-item-content">{{item.name}}</div>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
import $ from "../../libs/util.js";

export default {
  name: "app-header",
  props: {
    showType: String
  },
  data() {
    return {
      openDrawer: false,
      themes: [],
      isActive: true,
      itemId: 0
    };
  },
  methods: {
    getThemes() {
      $.ajax.get("themes").then(res => {
        this.themes = res.others;
      });
    },
    toRecommend() {
      this.$router.push({
        path: "/list/recommend/all",
      });
      this.isActive = true;
      this.itemId=0;
    },
    toThemes(id) {
        this.$router.push({
        path: "/list/themes/"+id,
      });
      this.isActive=false;
      this.itemId=id;
    },
    toggleDrawer() {}
  },

  mounted() {
    this.getThemes();
  }
};
</script>
<style>
</style>
